import { Space, Table, Tag, Row, Col, Button, Modal, Switch } from "antd";
import type { ColumnsType } from "antd/es/table";
import React, { useState, useEffect } from "react";
import CategoryForm from "./components/CategoryForm";
import { categoryGet } from "@/api/course";
import { CategoryType } from "@/types/course";

// interface DataType {
//   key: string;
//   name: string;
//   age: number;
//   address: string;
//   tags: string[];
// }

const columns: ColumnsType<CategoryType> = [
  {
    title: "类目ID",
    dataIndex: "objectId",
    key: "objectId",
    render: (text) => <a>{text}</a>,
  },
  {
    title: "类目名称",
    dataIndex: "cateName",
    key: "cateName",
    render: (text) => <a>{text}</a>,
  },
  {
    title: "上架状态",
    dataIndex: "status",
    key: "status",
    render: (bool, record, index) => <Switch checked={bool} />,
  },
  {
    title: "操作",
    render: () => {
      return (
        <Space>
          <Button type="primary" size="small">
            编辑
          </Button>
          <Button type="primary" size="small" danger>
            删除
          </Button>
        </Space>
      );
    },
  },
];

// const data: CategoryType[] = [ //测试表格
//   {
//     objectId: "asdfadf",
//     cateName: "冥想",
//     fatherId: "0-0",
//   },
// ];

const Category: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [data, setData] = useState<Array<CategoryType>>([]);
  useEffect(() => {
    categoryGet().then((res) => {
      setData(res.data.results);
    });
  }, []);
  return (
    <div>
      <Row justify="space-between" align="middle">
        <Col>课程分类管理</Col>
        <Col>
          <Button
            type="primary"
            onClick={() => {
              setIsModalOpen(true);
            }}
          >
            新增分类
          </Button>
        </Col>
      </Row>
      <Table columns={columns} dataSource={data} rowKey="objectId" />
      <Modal
        title="类目管理"
        open={isModalOpen}
        footer={null}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <CategoryForm setIsModalOpen={setIsModalOpen} cateList={data} />
      </Modal>
    </div>
  );
};

export default Category;
